<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">改变counter</button>
    <h2>{{ user.name }}</h2>
    <button @click="changeUsername">改变User的name</button>
  </div>
</template>

<script>
import { ref, reactive, watch,watchEffect } from "vue";
export default {
  data() {
    return {
      message: "helloworld",
    };
  },
  setup() {
    const counter = ref(0);
    function changeCounter() {
      counter.value++;
    }
    const user = reactive({
      name: "张三",
      age: 18,
    });
    function changeUsername() {
      user.name='李四'
    }
    //watch(监听的响应式引用,回调函数)
    watch(counter,(newVal,oldVal)=>{
        console.log("newVal-----------",newVal);
        console.log("oldVal-----------",oldVal);
    })
    //无法深度监听
    watch(user,(newVal,oldVal)=>{
        console.log("newVal-----------",newVal);
        console.log("oldVal-----------",oldVal);
    })
    //watchEffect(回调函数)  不需要指定监听的属性  自动收集依赖 组件初始化的时候会执行一次回调函数
    watchEffect(()=>{
        console.log(user.name);
    })
    return { counter, user, changeCounter,changeUsername,msg };
  },
/*watch和watchEffect的区别
1.watchEffect不需要指定监听属性,自动收集依赖,只要在回调函数中引用到了响应式属性  只要这些属性发生改变回调就会执行,
  watch之能监听指定的属性,做出回调函数的执行,可以监听多个 vue3开始后
  2. watch可以获取到新值和旧值
  3. watchEffect在组件初始化的时候就会自动执行一次用来手机依赖 watch不需要 一开始就指定了
*/




  //选项式API中watch的使用方式
  watch: {
    message: function (newValue, oldValue) {},
  },
};
</script>
<style lang='less' scoped>
</style>